<template>
    <div>
        <el-row>
            <el-col :span="3">
                <span style="line-height:40px; vertical-align:middle">搜索品名/货号:</span>
            </el-col>
            <el-col :span="20">
                <el-select v-model="part_id" placeholder="请选择配件" filterable clearable style="width:600px">
                    <el-option
                        v-for="item in partStoreList"
                        :key="item.Part.id"
                        :label="`${item.Part.name}, 货号:${item.Part.no}, 规格:${item.Part.model}`"
                        :value="item.Part.id"
                    ></el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-table
            :data="filterDate.slice((page-1)*pageSize, page*pageSize)"
            stripe
            border
            style="width: 100%; margin-top: 20px"
            :default-sort="{prop: 'date', order: 'descending'}"
        >
            <el-table-column label="序号" type="index" width="50">
                <template slot-scope="scope">
                    <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="入库说明" sortable></el-table-column>
            <el-table-column prop="Part.name" label="配件名字" sortable></el-table-column>
            <el-table-column prop="Part" label="分类" sortable>
                <template slot-scope="scope">
                    <span>{{ scope.row.Part.Category.type + ' ' + scope.row.Part.Category.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="Part.model" label="型号/规格" sortable></el-table-column>
            <el-table-column prop="date" label="入库日期" sortable></el-table-column>
            <el-table-column prop="count" label="入库数量" sortable></el-table-column>
            <el-table-column fixed="right" width="300" label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="$router.push({name: 'partPurchase', params: {id: scope.row.id}, query: {from: 'partPurchaseList'}})"
                    >修改</el-button>
                    <el-button size="mini" type="primary" @click="$router.push({name: 'partStoreList', query: {part_id: scope.row.part_id}})">查看库存</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row :gutter="20" style="padding: 10px 0">
            <el-col :span="4">
                <el-button @click="$router.push({name: 'partPurchaseCreate', query: {from: 'partPurchaseList'}})" type="primary">配件入库</el-button>
            </el-col>
            <el-col :span="20">
                <el-pagination
                    background
                    style="float: right"
                    layout="prev, pager, next, sizes, total, jumper"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    :current-page="page"
                    :total="filterDate.length"
                    @current-change="val => page = val"
                    @size-change="val => pageSize = val"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            part_id: parseInt(this.$route.query.part_id) || null,
            tableData: [],
            partStoreList: [],
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        filterDate() {
            if (this.part_id) {
                return this.tableData.filter(item => item.part_id === this.part_id)
            } else {
                return this.tableData
            }
        }
    },
    created() {
        this.fetch()
    },
    methods: {
        async fetch() {
            const res = await this.$http.get('/partPurchaseList')
            if (res && res.code === 0) {
                this.tableData = res.returnObject || []
            }
            const res2 = await this.$http.get('/partStoreList')
            if (res2 && res2.code === 0) {
                this.partStoreList = res2.returnObject || []
            }
        },
        async del(row) {
            this.$confirm(`删除:${row.name} 的入库记录, 是否继续?`, '警报', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    const response = await this.$http.delete(`/partPurchase/${row.id}`)
                    if (response && response.code === 0) {
                        this.tableData.splice(this.tableData.findIndex(item => item.id === row.id), 1)
                        this.$message.success('删除成功')
                    }
                })
                .catch(() => {})
        }
    }
}
</script>

<style scoped>
</style>
